<template>
  <div class="h-panel">
    <PaasTitleBar></PaasTitleBar>
    <div class="h-panel-body bottom-line">
      <Form ref="form" :validOnChange="true" :showErrorTip="true" labelPosition="left" :labelWidth="110" :rules="vRules"
        :model="model">
        <FormInput label="数据库名称" prop="dbName" v-model="model.dbName"></FormInput>
        <FormItem label="获取表信息" prop="tableSql">
          <textarea rows="10" v-model="model.tableSql"></textarea>
        </FormItem>
        <FormItem label="获取表详情" prop="tableDetail">
          <textarea rows="10" v-model="model.tableDetail"></textarea>
        </FormItem>
      </Form>
    </div>
    <PaasButtonBar></PaasButtonBar>
  </div>
</template>

<script>
export default {
  async mounted() {
    let id = this.$route.query.id;
    if (!!id) {
      this.model = await this.$store.dispatch("getFormData", id);
    }
  },
  data() {
    return {
      model: {
        id: "",
        dbName: "",
        tableSql: "",
        tableDetail: "",
      },
      vRules: {
        required: [
          "dbName",
          "tableSql",
          "tableDetail"
        ],
      }
    };
  },
  deactivated() {
    this.$destroy(true);
  }
};
</script>
